.importer-dropzone {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  border-width: 2px;
  border-style: dashed;
  background: $studio-simplenote-blue-5;
  transition: padding 0.2s ease-out, background 0.2s ease-out;

  &:focus-within {
    overflow: hidden;
    outline: $focus-outline;
  }

  @at-root .theme-dark & {
    background: $studio-gray-70;
  }

  &.is-active {
    opacity: 0.75;
  }

  &.is-accepted {
    flex-direction: row;
    justify-content: flex-start;
    padding: 14px 18px;
    border-width: 1px;
    border-style: solid;
    background: transparent;

    svg {
      margin-right: 8px;
    }
  }
}

.importer-dropzone__filename {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
